<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">DataTable - Instant Row Selection</h1>
        <div class="entry">
            <p>This is a detail page for the selected car.</p>

            <p:fieldset>
                <f:facet name="legend">
                    <p:graphicImage value="/images/cars/#{flash.selectedCar.manufacturer}.jpg"/>
                </f:facet>

                <h:panelGrid id="display" columns="2" cellpadding="4">
                  
                    <h:outputText value="Model:" />
                    <h:outputText value="#{flash.selectedCar.model}" style="font-weight:bold"/>

                    <h:outputText value="Year:" />
                    <h:outputText value="#{flash.selectedCar.year}" style="font-weight:bold"/>

                    <h:outputText value="Manufacturer:" />
                    <h:outputText value="#{flash.selectedCar.manufacturer}" style="font-weight:bold"/>

                    <h:outputText value="Color:" />
                    <h:outputText value="#{flash.selectedCar.color}" style="font-weight:bold"/>
                </h:panelGrid>
            </p:fieldset>


            <h3>Source</h3>
            <p:tabView>
                <p:tab title="carDetail.xhtml">
                   <pre name="code" class="xml">
&lt;p:fieldset&gt;
    &lt;f:facet name="legend"&gt;
        &lt;p:graphicImage value="/images/cars/\#{flash.selectedCar.manufacturer}.jpg"/&gt;
    &lt;/f:facet&gt;

    &lt;h:panelGrid id="display" columns="2" cellpadding="4"&gt;

        &lt;h:outputText value="Model:" /&gt;
        &lt;h:outputText value="\#{flash.selectedCar.model}" style="font-weight:bold"/&gt;

        &lt;h:outputText value="Year:" /&gt;
        &lt;h:outputText value="\#{flash.selectedCar.year}" style="font-weight:bold"/&gt;

        &lt;h:outputText value="Manufacturer:" /&gt;
        &lt;h:outputText value="\#{flash.selectedCar.manufacturer}" style="font-weight:bold"/&gt;

        &lt;h:outputText value="Color:" /&gt;
        &lt;h:outputText value="\#{flash.selectedCar.color}" style="font-weight:bold"/&gt;
    &lt;/h:panelGrid&gt;
&lt;/p:fieldset&gt;
                    </pre> 
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>
